<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button v-auth="'gen:table:import'" type="success" icon="el-icon-upload" @click="importTable">导入表</el-button>
				<el-button v-auth="'gen:table:create'" type="primary" icon="el-icon-pointer" @click="createTable">新建表</el-button>
				<el-button v-auth="'gen:table:remove'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0" @click="batchDel">删除</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.tableName" placeholder="表名" clearable></el-input>
					<el-input v-model="search.tableComment" placeholder="表注释" clearable></el-input>
					<el-button v-auth="'gen:table:page'" type="primary" icon="el-icon-search" @click="upSearch">搜索</el-button>
					<el-button @click="resetSearch">重置</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="dataList" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="新建方式" prop="tableType" align="center" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.tableType==='1'" type="success">导入</el-tag>
						<el-tag v-if="scope.row.tableType==='2'" type="primary">新建</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="表名" prop="tableName" align="center" width="140"></el-table-column>
				<el-table-column label="表注释" prop="tableComment" align="center" width="140"></el-table-column>
				<el-table-column label="实体类名" prop="genClass" align="center" width="140"></el-table-column>
				<el-table-column label="功能名" prop="genFunction" align="center" width="140"></el-table-column>
				<el-table-column label="作者" prop="genAuthor" align="center" width="140"></el-table-column>
				<el-table-column label="版本号" prop="genVersion" align="center" width="140"></el-table-column>
				<el-table-column label="表格" prop="genPageTableType" align="center" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.genPageTableType==='1'" type="success">分页</el-tag>
						<el-tag v-if="scope.row.genPageTableType==='2'" type="primary">列表</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="表单" prop="genPageFormType" align="center" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.genPageFormType==='1'" type="success">单列</el-tag>
						<el-tag v-if="scope.row.genPageFormType==='2'" type="primary">双列</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="表单打开方式" prop="genPageFormOpen" align="center" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.genPageFormType==='1'" type="success">弹窗</el-tag>
						<el-tag v-if="scope.row.genPageFormType==='2'" type="primary">抽屉</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" align="center" width="180" sortable='custom'></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="210">
					<template #default="scope">
						<el-button-group>
							<el-button v-auth="'gen:table:edit'" text type="primary" size="small" @click="tableEdit(scope.row, scope.$index)">
								配置
							</el-button>
							<el-button v-auth="'gen:table:genLocal'" text type="primary" size="small" @click="tableGenLocal(scope.row, scope.$index)">
								生成
							</el-button>
							<el-button v-auth="'gen:table:genDownload'" text type="primary" size="small" @click="tableGenDownload(scope.row, scope.$index)">
								下载
							</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row, scope.$index)">
								<template #reference>
									<el-button v-auth="'gen:table:remove'" text type="primary" size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="refreshTable" @closed="dialog.save=false"></save-dialog>

	<import-table-dialog v-if="dialog.importTable" ref="importTableDialog" @success="refreshTable" @closed="dialog.importTable=false"></import-table-dialog>

	<create-table-dialog v-if="dialog.createTable" ref="createTableDialog" @success="refreshTable" @closed="dialog.createTable=false"></create-table-dialog>

</template>

<script>
import saveDialog from './save.vue'
import importTableDialog from './importTable.vue'
import createTableDialog from './createTable.vue'

export default {
	name: 'genTable',
	components: {
		saveDialog,
		importTableDialog,
		createTableDialog
	},
	data() {
		return {
			dialog: {
				save: false,
				importTable: false,
				createTable: false
			},
			selection: [],
			search: {
				tableName: null,
				tableComment: null,
			},
			dataList: this.$API.gen.table.page
		}
	},
	mounted() {
	},
	methods: {
		// 添加
		createTable() {
			this.dialog.createTable = true;
			this.$nextTick(() => {
				this.$refs.createTableDialog.open();
			})
		},
		// 导入
		importTable() {
			this.dialog.importTable = true;
			this.$nextTick(() => {
				this.$refs.importTableDialog.open();
			})
		},
		// 批量删除
		batchDel() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项数据吗？`, '提示', {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading();
				const idList = [];
				this.selection.forEach(e => idList.push(e.id));
				const reqData = {idList: idList};
				this.$API.gen.table.remove.delete(reqData).then(() => {
					this.$refs.table.refresh();
					this.$message.success("删除成功");
				})
				loading.close();
			})
		},
		// 代码生成
		tableGenLocal(row) {
			this.$API.gen.table.genLocal.post(row.id).then(() => {
				this.$message.success("生成成功");
			})
		},
		// 代码下载
		tableGenDownload(row) {
			this.$API.gen.table.genDownload.downloadFile(row.id);
		},
		// 编辑
		tableEdit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open().setData(row);
			})
		},
		// 删除
		tableDel(row) {
			const reqData = {idList: [row.id]};
			this.$API.gen.table.remove.delete(reqData).then(() => {
				this.$refs.table.refresh();
				this.$message.success("删除成功");
			})
		},
		// 搜索
		upSearch() {
			this.$refs.table.upData(this.search);
		},
		// 重置
		resetSearch() {
			this.search.tableName = null;
			this.search.tableComment = null;
			this.$refs.table.upData(this.search);
		},
		// 表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		// 表格刷新
		refreshTable() {
			this.$refs.table.refresh();
		}
	}
}
</script>

<style>
</style>
